<template>
  <div class="front serve">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="banner_bg">
			<img class="" src="http://image.utea88.com/statics/pc_finance_banner.png" alt="">
    </div>
    <div class="serve-container">
      <div class="serve-main">
        <div class="top">
          <li>
            <div class="box">
              <img src="@/assets/front-img/money1.png" alt />
              <p>额度高</p>
            </div>
          </li>
          <li>
            <div class="box">
              <img src="@/assets/front-img/money2.png" alt />
              <p>费率低</p>
            </div>
          </li>
          <li>
            <div class="box">
              <img src="@/assets/front-img/money3.png" alt />
              <p>手续简</p>
            </div>
          </li>
          <!-- <li>
            <div class="box">
              <img src="@/assets/front-img/money4.png" alt />
              <p>周期短</p>
            </div>
          </li> -->
          <li>
            <div class="box">
              <img src="@/assets/front-img/money5.png" alt />
              <p>审批快</p>
            </div>
          </li>
          <li>
            <div class="box">
              <img src="@/assets/front-img/money6.png" alt />
              <p>放款快</p>
            </div>
          </li>
        </div>
        <!-- <div class="title">金融产品</div>
        <div class="products">
          <li v-for="(item,index) in products" :key="index" class="good">
            <h3>{{item.name}}</h3>
            <div class="tips-box">
              <div class="tips">
                <span v-for="(tip,i) in item.viceName" :key="i" class="tip">{{tip}}</span>
              </div>
            </div>
            <div class="btn-box">
              <el-button class="buy btn" @click="toDetail(item.id)" type="primary">了解更多></el-button>
            </div>
          </li>
        </div> -->
        <div class="introduce">
          <!-- <div class="right">
            <img :src="centerDetail.image" alt />
          </div> -->
          <div class="left">
            <p v-if="centerDetail.remark" v-html="centerDetail.remark"></p>
          </div>
        </div>
        <div class="main-item">
          <div class="title">
            <img src="@/assets/front-img/tip-left.png" alt />
            <span>合作企业</span>
            <img src="@/assets/front-img/tip-right.png" alt />
          </div>
          <div class="item-container">
            <ul class="item3-list">
              <li v-for="(item,index) in companyList" :key="index" @click="BusinessCircles(index)">
                <img :src="item.image" alt class="img" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
	import store from "@/store";
import { advisementByCode, getNewData } from "@/api/front-home.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
export default {
  data() {
    return {
      products: [],
      listQuery: {
        code: "financeProduct",
      },
      centerDetail: {},
      companyList: [],
    };
  },
  created() {
    this.getNewData();
    this.getData();
  },
  components: {
    Footer,
    Header,
		store
  },
  methods: {
    // 获取金融产品
    getNewData() {
      getNewData(this.listQuery).then((res) => {
        if (res.list && res.list.length) {
          this.products = res.list;
          this.products = this.products.map((ele) => {
            ele.viceName = ele.viceName
              .replace(/，/g, ",")
              .split(",")
              .slice(0, 4);
            return ele;
          });
          console.log(this.products);
        }
      });
    },
    // 获取金融简介
    getData() {
      advisementByCode("financeAbout").then((res) => {
        this.centerDetail = res;
      });
      getNewData({ code: "financeCompany" }).then((res) => {
        if (res.list && res.list.length) {
          this.companyList = res.list;
        }
      });
    },
		BusinessCircles(index){
			console.log(this.$store.getters.token);
			console.log(this.$store.getters.userInfo.mobile);
			if(this.$store.getters.token == null||''){
				this.$confirm('请登录').then(() => {
				  this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
				})
				return
			}
			// if(index == 1){
			// 	 window.location.href = 'http://app.heikemen.cn/gotc/ICBCh5/index.html?token=' +this.$store.getters.token  +
			// 	'&mobile=' + this.$store.getters.userInfo.mobile;
			// 	// this.$router.push({ path: "/front-ICBC" });
			// }
			
		},
    toDetail(id) {
      this.$router.push({ path: "/front-serveDetail", query: { id: id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.serve {
  
  .serve-container {
    background-color: #f6f6f6;
    .serve-main {
      width: 1200px;
      margin: 0 auto;
      padding: 29px 0;
      .top {
				background-color: #fff;
				box-shadow: 0px 1px 5px 0px #888888;
				border-radius: 10px;
        height: 200px;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        > li {
          display: flex;
          justify-content: center;
          align-items: center;
          .box {
            text-align: center;
            p {
              margin-top: 20px;
            }
          }
        }
      }
      .title {
        text-align: center;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #965f29;
        margin: 30px 0;
      }
      .products {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .good {
          position: relative;
          min-height: 264px;
          width: calc(20% - 22px);
          margin-right: 22px;
          background: #ffffff;
          margin-bottom: 18px;
          padding: 33px 19px;
          > h3 {
            font-size: 20px;
            font-family: FZLTHK;
            font-weight: normal;
            color: #965f29;
            text-align: center;
          }
          .tips-box {
            margin: 28px 0 26px;
            display: flex;
            justify-content: center;
            align-items: center;

            .tips {
              width: 100%;

              .tip {
                padding: 0 10px;
                text-align: center;
                width: 85px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                box-sizing: border-box;
                display: inline-block;
                height: 38px;
                line-height: 38px;
                margin-right: 5px;
                margin-bottom: 11px;
                background: #f6f6f6;
                border-radius: 18px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
              }
            }
          }
          .btn-box {
            position: absolute;
            bottom: 22px;

            display: flex;
            justify-content: center;
            .buy {
              width: 173px;
              height: 37px;
              background: #ffffff;
              border: 1px solid #965f29;
              border-radius: 20px;
              color: #965f29;
            }
          }
        }
      }
      .introduce {
				margin-top: 20px;
        background-color: #fff;
				box-shadow: 0px 1px 5px 0px #888888;
				border-radius: 10px;
        // display: flex;
        // justify-content: space-between;
        padding: 43px;
        overflow: hidden;
        // align-items: center;
        .left {
          // width: 656px;
          box-sizing: border-box;
          h2 {
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-bottom: 16px;
          }

          p {
            line-height: 30px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: #000000;
            text-indent: 2em;
          }
          .vickName {
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #965f29;
            margin: 36px 0;
          }
        }
        .right {
          width: 416px;
          margin-right: 38px;
          float: left;
          // height: 285px;
          > img {
            width: 100%;
          }
        }
      }
      .main-item {
				background-color: #fff;
				box-shadow: 0px 1px 5px 0px #888888;
				border-radius: 10px;
        padding: 20px 20px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 31px;
        .title {
          text-align: center;
          margin-bottom: 35px;
          > span {
            margin: 0 10px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
          }
        }
        .title-new {
          padding: 25px 0;
          .title-new-box {
            padding: 0 26px;
            display: flex;
            text-align: left;
            justify-content: space-between;
            .title-value {
              > span {
                margin: 0 10px;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: 400;
              }
            }
          }
        }
        .item-container {
          .item3-list {
            display: flex;
            flex-wrap: wrap;
            li {
              margin: 30px 15px;
              width: calc(16.6% - 30px);
              height: 103px;
              background-color: #f7f7f7;
              border: 1px solid #ff9900;
              padding: 10px;
              .img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
